<template>
	<div class="squareSection" :style="{width:w +'px'}">
		<div class="rectangleLeftImg" :class="yellow?'yellow-left':''">
			<img :src="require('../assets/' + src)" />
		</div>
		<div class="rectangleRightImg"  :style="{width:(w - 68)+'px'}" :class="yellow?'yellow-right':''">
			<span>{{ num }}</span>
			<span>{{ text }}</span>
		</div>
	</div>
</template>

<script setup>
  import {
    ref,
    reactive,
    defineProps,
    onMounted,
    watch,toRefs
  } from "vue";
  const props = defineProps({
    src: {
      type: String,
			default:'iconBorder/icon-shijian.png'
    },
    num: {
      type: String,
    },
    text: {
      type: String,
    },
    w: {
      type: Number,
			default: 172
    },
    yellow: {
      type: Boolean,
			default: false
    }
  });
  const { src, num, text, w, yellow} = toRefs(props);
  onMounted(() => {});
  // export default {
  //   name: "squareSection",
	// 	props:{
  //     src: {
  //       type: String,
	// 			// default:'../assets/iconBorder/icon-shijian.png'
	// 			default:'iconBorder/icon-shijian.png'
  //     },
  //     num: {
  //       type: String,
  //     },
  //     text: {
  //       type: String,
  //     }
	// 	}
  // }
</script>
<style lang="scss">
	.squareSection {
		/*width: 30%;*/
		width: 172px;
		/*height: 100%;*/
		display: flex;
		align-items: center;
		position: relative;
		.yellow-left{
			background-image: url("../assets/iconBorder/l-yellow.png") !important;
		}
		.rectangleLeftImg {
			display: flex;
			align-items: center;
			justify-content: center;
			// width: 30%;
			/*width: 38%;*/
			/*height: 100%;*/
			width: 68px;
			height: 68px;
			background-image: url("../assets/iconBorder/zuoce.png");
			background-repeat: no-repeat;
			background-size: 100% 100%;
			img{
				width: 36px;
				height: 34px;
			}
		}

		.yellow-right{
			background-image: url("../assets/iconBorder/r-yellow.png") !important;
		}
		.rectangleRightImg {
			/*width: 70%;*/
			width: 150px;
			height:58px;
			background-image: url("../assets/iconBorder/youce.png");
			background-repeat: no-repeat;
			background-size: 100% 100%;
			position: absolute;
			/*right: 0px;*/
			left: 63px;
			display: flex;
			flex-direction: column;
			justify-content: center;
			span:first-child {
				color: #d6e3ea;
				font-size: 13px;
			}
			span:last-child {
				color: #979ba1;
				font-size: 12px;
			}
			span {
				text-align: center;
				display: block;
			}
		}
	}
</style>
